<template>
    <div>
        <global-tables
            @changePage="handleChangePage"
            :total="total"
            @handleAllSelect="handleAllSelect"
            :list="list"
            :loading="loading"
            :columns="columns"
            :current="search.pageindex"
        >
            <Form :model="search" :label-width="80">
                <div class="table-top-wrap">
                    <div>
                        <div>
                            <Button v-if="isAddBtn" class="features-btn" @click="handleBtnClick(null,'add')">
                                <Icon type="md-add" size="18"/>新建
                            </Button>
                            <Button v-if="isProhibit" class="features-btn btn-auto-m" @click="handleBtnClick(null,'off')">
                                <Icon type="ios-lock-outline" size="17"/>停用
                            </Button>
                            <Button v-if="isProhibit" class="features-btn btn-auto-m" @click="handleBtnClick(null,'on')">
                                <Icon type="ios-unlock-outline" size="17"/>启用
                            </Button>
                        </div>
                    </div>
                    <div class="table-top-wrap-bottom">
                        <div>
                            <Select v-model="search.type" style="width:100px; margin:0 10px" placeholder="供应商类别">
                                <Option value="-1">全部</Option>
                                <Option value="0">考察供应商</Option>
                                <Option value="1">优先供应商</Option>
                                <Option value="2">战略供应商</Option>
                                <Option value="3">消极供应商</Option>
                            </Select>
                        </div>

                        <div>
                            <Select v-model="search.status" style="width:80px; margin:0 10px" placeholder="状态">
                                <Option value="-1">全部</Option>
                                <Option value="0">关闭</Option>
                                <Option value="1">正常</Option>
                            </Select>
                        </div>
                        <div>
                            <input type="text" class="style-input" @keyup.enter="handleSearch" v-model="search.keyword" placeholder="请输入供货商名称	">
                            <i-input style="display:none"></i-input>
                        </div>
                        <div>
                            <Button icon="ios-search" @click="handleSearch" class="search-btn">搜索</Button>
                        </div>
                    </div>
                </div>
            </Form>
        </global-tables>
        <Modal :mask-closable="false" v-model="isModal" :title="ModalTitle" width="600">
            <div v-if="isModal">
                <Form ref="formItem" :model="formItem" :rules="ruleValidate" :label-width="100">
                    <Row>
                        <i-col :lg="{ span: 11}">
                            <FormItem label="供货商名称" prop="SupplierName">
                                <i-input v-model="formItem.SupplierName" placeholder="请输入供货商名称"></i-input>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 13}">
                            <FormItem label="城市" prop="cityValue">
                                <Cascader :data="cityList" v-model="cityValue" placeholder="请选择城市" @on-change="setCityName"></Cascader>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row>
                        <i-col :lg="{ span: 11}">
                            <FormItem label="联系人" prop="Contact">
                                <i-input v-model="formItem.Contact" placeholder="请输入联系人"></i-input>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 13}">
                            <FormItem label="联系电话" prop="Mobile">
                                <i-input v-model="formItem.Mobile" placeholder="请输入联系电话"></i-input>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 11}">
                            <FormItem label="办公电话" prop="Tel">
                                <i-input v-model="formItem.Tel" placeholder="请输入办公电话"></i-input>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 13}">
                            <FormItem label="Gmp证书号" prop="Gmp">
                                <i-input v-model="formItem.Gmp" placeholder="请输入Gmp证书号"></i-input>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row>
                        <FormItem label="供应商类别" prop="SupplierType">
                            <Select v-model="formItem.SupplierType" placeholder="请选择供应商类别">
                                <Option value="0">考察供应商</Option>
                                <Option value="1">优先供应商</Option>
                                <Option value="2">战略供应商</Option>
                                <Option value="3">消极供应商</Option>
                                <Option value="4">厂家</Option>
                            </Select>
                        </FormItem>
                    </Row>
                    <Row>
                        <i-col :lg="{ span: 24}">
                            <FormItem label="社会信用代码" prop="Licence">
                                <i-input v-model="formItem.Licence" placeholder="请输入统一社会信用代码"></i-input>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 24}">
                            <FormItem label="营业执照">
                                <img-upload
                                    :defaultList="defaultList"
                                    :multiple="false"
                                    @delImgList="delImgList"
                                    :data="{directory:'OrgPath'}"
                                    :check="1"
                                    :value="'pic'"
                                    @setImgLIst="setImgLIst"
                                ></img-upload>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row>
                        <i-col :lg="{ span: 24}">
                            <FormItem label="详细地址" prop="Address">
                                <i-input type="textarea" v-model="formItem.Address" placeholder="请输入供应商详细地址"></i-input>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 24}">
                            <FormItem label="备注" prop="Remark">
                                <i-input type="textarea" v-model="formItem.Remark" placeholder="请输入备注"></i-input>
                            </FormItem>
                        </i-col>
                    </Row>
                </Form>
            </div>
            <div slot="footer">
                <Button size="large" @click="handleClose">取消</Button>
                <Button type="primary" size="large" @click="handleSubmit('formItem')">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
/**
 * 供应商列表
 */
import { cyclicRouting } from '@/util';
import { getModulePermission } from '@/api/user';
import cityListJson from '@/config/cityLevelThree.js';
import GlobalTables from '@/components/GlobalTables';
import ImgUpload from '@/components/ImgUpload';
import { getTablesList, addTablesItem, getItemInfo, setDisableEnable } from './service';
export default {
    name: 'OrganizationSupplier',
    components: {
        GlobalTables,
        ImgUpload
    },
    data() {
        /* 城市校验 由于级联校验存在问题采用次方法 */
        const validateCityValue = (rule, value, callback) => {
            if (this.cityValue.length < 1) {
                callback(new Error('请选择城市'));
            } else {
                callback();
            }
        };
        return {
            allSelectArr: null,
            imgType: false,
            isAddBtn: false,
            isProhibit: false,
            isEdit: false,
            loading: true,
            isModal: false,
            formItem: this.initFormItem(),
            ruleValidate: {
                SupplierName: [
                    {
                        required: true,
                        message: '请输入供应商名称',
                        trigger: 'change'
                    }
                ],
                Licence: [
                    {
                        required: true,
                        message: '请输入统一社会信用代码',
                        trigger: 'change'
                    }
                ],
                Gmp: [
                    {
                        required: true,
                        message: '请输入Gmp证书号',
                        trigger: 'change'
                    }
                ],
                Contact: [
                    {
                        required: true,
                        message: '请输入联系人',
                        trigger: 'change'
                    }
                ],
                cityValue: [
                    {
                        validator: validateCityValue,
                        required: true,
                        trigger: 'change'
                    }
                ],
                Mobile: [
                    {
                        required: true,
                        message: '请输入联系人电话',
                        trigger: 'change'
                    }
                ],
                SupplierType: [
                    {
                        required: true,
                        message: '请输入联系人电话',
                        trigger: 'change'
                    }
                ],
                Address: [
                    {
                        required: true,
                        message: '请输入供应商地址',
                        trigger: 'change'
                    }
                ]
            }, // 表单校验
            ModalTitle: '新建供应商',
            cityValue: [],
            imglist: {
                pic: []
            },
            cityList: [],
            defaultList: [],
            list: [],
            total: 0,
            itemId: 0,
            search: {
                type: '',
                keyword: '',
                status: '',
                pageindex: 1,
                pagesize: 10
            },
            columns: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    title: '供货商名称',
                    key: 'SupplierName'
                },
                {
                    title: '供货商编码',
                    width: 110,
                    key: 'SupplierCode'
                },
                {
                    title: '供货商类别',
                    width: 115,
                    key: 'SupplierType',
                    render: (h, params) => {
                        const { SupplierType } = params.row;
                        if (SupplierType == 0) {
                            return h('div', [
                                h('Badge', {
                                    props: {
                                        status: 'success',
                                        text: '考察供应商'
                                    }
                                })
                            ]);
                        } else if (SupplierType == 1) {
                            return h('div', [
                                h('Badge', {
                                    props: {
                                        status: 'processing',
                                        text: '优先供应商'
                                    }
                                })
                            ]);
                        } else if (SupplierType == 2) {
                            return h('div', [
                                h('Badge', {
                                    props: {
                                        status: 'warning',
                                        text: '战略供应商'
                                    }
                                })
                            ]);
                        } else if (SupplierType == 3) {
                            return h('div', [
                                h('Badge', {
                                    props: {
                                        status: 'error',
                                        text: '消极供应商'
                                    }
                                })
                            ]);
                        } else if (SupplierType == 4) {
                            return h('div', [
                                h('Badge', {
                                    props: {
                                        status: 'error',
                                        text: '厂家'
                                    }
                                })
                            ]);
                        }
                    }
                },
                {
                    title: '联系人',
                    width: 90,
                    key: 'Contact'
                },
                {
                    title: '联系电话',
                    width: 120,
                    key: 'Mobile'
                },
                {
                    title: '办公电话',
                    width: 125,
                    key: 'Tel'
                },
                {
                    title: '信用代码',
                    render: (h, params) => {
                        return h('div', [
                            h(
                                'Poptip',
                                {
                                    props: { placement: 'bottom' }
                                },
                                [
                                    h(
                                        'span',
                                        {
                                            style: {
                                                display: 'inline-block',
                                                width: params.column._width * 0.7 + 'px',
                                                overflow: 'hidden',
                                                textOverflow: 'ellipsis',
                                                whiteSpace: 'nowrap'
                                            }
                                        },
                                        params.row.Licence
                                    ),
                                    h(
                                        'span',
                                        {
                                            slot: 'content',
                                            style: {
                                                whiteSpace: 'normal',
                                                wordBreak: 'break-all'
                                            }
                                        },
                                        params.row.Licence
                                    )
                                ]
                            )
                        ]);
                    }
                },
                {
                    title: '状态',
                    key: 'IsActivity',
                    width: 80,
                    render: (h, params) => {
                        const { IsActivity } = params.row;
                        if (IsActivity == 0) {
                            return h('div', [
                                h('Badge', {
                                    props: {
                                        status: 'success',
                                        text: '关闭'
                                    }
                                })
                            ]);
                        } else if (IsActivity == 1) {
                            return h('div', [
                                h('Badge', {
                                    props: {
                                        status: 'processing',
                                        text: '正常'
                                    }
                                })
                            ]);
                        }
                    }
                },
                {
                    title: '地址',
                    render: (h, params) => {
                        return h('div', [
                            h(
                                'Poptip',
                                {
                                    props: { placement: 'bottom' }
                                },
                                [
                                    h(
                                        'span',
                                        {
                                            style: {
                                                display: 'inline-block',
                                                width: params.column._width * 0.6 + 'px',
                                                overflow: 'hidden',
                                                textOverflow: 'ellipsis',
                                                whiteSpace: 'nowrap'
                                            }
                                        },
                                        params.row.Address
                                    ),
                                    h(
                                        'span',
                                        {
                                            slot: 'content',
                                            style: {
                                                whiteSpace: 'normal',
                                                wordBreak: 'break-all'
                                            }
                                        },
                                        params.row.Address
                                    )
                                ]
                            )
                        ]);
                    }
                },
                {
                    title: '操作',
                    width: 70,
                    align: 'center',
                    render: (h, params) => {
                        const { isEdit } = this;
                        return h('div', [
                            isEdit &&
                                h(
                                    'Button',
                                    {
                                        props: {
                                            type: 'primary',
                                            size: 'small'
                                        },
                                        style: {
                                            background: '#5ab1ef',
                                            border: 'none',
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: () => {
                                                this.handleBtnClick(params.row, 'edit');
                                            }
                                        }
                                    },
                                    '修改'
                                )
                        ]);
                    }
                }
            ]
        };
    },
    mounted() {
        this.setCity();
        /* 获取菜单的id */
        cyclicRouting(JSON.parse(sessionStorage.getItem('user')).menuList, this.$route, id => {
            /* 按钮权限请求 */
            getModulePermission({
                roleid: JSON.parse(sessionStorage.getItem('user')).roleid,
                moduleid: id
            }).then(res => {
                /* 按钮权限赋值 */
                for (let item in res.data) {
                    if (res.data[item].name == 'add') {
                        this.isAddBtn = true;
                    } else if (res.data[item].name == 'onoff') {
                        this.isProhibit = true;
                    } else if (res.data[item].name == 'edit') {
                        this.isEdit = true;
                    }
                }
                /* 列表请求 */
                this.getTablesListData();
            });
        });
    },
    methods: {
        /* 图片上传 */
        setImgLIst(list, value) {
            this.imglist[value] = list;
            this.imgType = true;
        },
        /* 表格查询 */
        handleSearch() {
            this.loading = true;
            this.getTablesListData();
        },
        /* 图片删除 */
        delImgList(list, value) {
            this.imglist[value] = list;
            this.imgType = false;
        },
        /* 表格分页方法 */
        handleChangePage(type, page) {
            this.loading = true;
            if (type == 'page') {
                this.search.pageindex = page;
                this.getTablesListData();
            } else {
                this.search.pagesize = page;
                this.getTablesListData();
            }
        },
        /* 设置城市名称 */
        setCityName(value, label) {
            this.cityName = label;
        },
        /* 表格数据请求 */
        getTablesListData() {
            const data = this.search;
            getTablesList(data).then(res => {
                this.list = res.rows;
                this.loading = false;
                this.total = res.records;
            });
        },
        /* 复选框选中 */
        handleAllSelect(list) {
            let arr = [];
            for (let item in list) {
                arr.push(list[item].ID);
                arr.join(',');
            }
            arr = arr.join(',');
            this.allSelectArr = arr;
        },
        /* 对话框 */
        handleBtnClick(item, type) {
            if (type == 'edit' || type == 'add') {
                this.cityValue = [];
                this.formItem = this.initFormItem();
                this.defaultList = [];
                this.itemId = 0;
                if (type == 'add') {
                    this.isModal = true;
                }
                if (type == 'edit') {
                    this.ModalTitle = '修改供应商';
                    getItemInfo({
                        id: item.ID
                    }).then(res => {
                        this.itemId = item.ID;
                        this.formItem = res.data;
                        this.cityValue.push(res.data.ProvID);
                        this.cityValue.push(res.data.CityID);
                        this.cityValue.push(res.data.AreaID);
                        this.formItem.SupplierType = res.data.SupplierType + '';
                        if (res.data.Picture) {
                            this.defaultList.push({
                                url: res.data.Picture
                            });
                        }
                        this.isModal = true;
                    });
                }
            } else if (type === 'off' || type === 'on') {
                let title = '';
                if (type === 'off') {
                    title = '停用';
                } else {
                    title = '启用';
                }
                if (this.allSelectArr) {
                    this.$Modal.confirm({
                        title: `你确定要${title}吗`,
                        onOk: () => {
                            setDisableEnable({
                                keyValue: this.allSelectArr,
                                value: type === 'off' ? 0 : 1
                            }).then(res => {
                                if (res.state == 'success') {
                                    this.$Message.success(res.message);
                                    this.allSelectArr = '';
                                } else {
                                    this.$Message.error(res.message);
                                }
                                this.getTablesListData();
                                this.allSelectArr = null;
                            });
                        },
                        onCancel: () => {
                            this.$Message.info('取消成功');
                        }
                    });
                } else {
                    this.$Message.error('请先选择需要操作的记录');
                }
            }
        },
        handleSubmit(name) {
            this.$refs[name].validate(valid => {
                if (valid) {
                    const data = {
                        ...this.formItem,
                        ID: this.itemId,
                        Picture: this.imglist.pic[0] ? this.imglist.pic[0].url : '',
                        ProvID: this.cityValue[0],
                        CityID: this.cityValue[1],
                        AreaID: this.cityValue[2]
                    };
                    addTablesItem(data).then(res => {
                        if (res.state == 'success') {
                            this.$Message.success('操作成功');
                            this.loading = true;
                            this.isModal = false;
                            this.getTablesListData();
                        } else {
                            this.$Message.error(res.message);
                        }
                    });
                }
            });
        },
        /* 关闭对话框 */
        handleClose() {
            this.isModal = false;
        },
        /* 城市 */
        setCity() {
            this.cityList = cityListJson.list;
        },
        /* 表单数据 */
        initFormItem() {
            return {};
        }
    }
};
</script>

<style>
</style>
